import {observable, computed, action} from 'mobx'
import {createContext} from 'react'

/**验证码发送按钮 */
class LoginAuthCodeBtn {
  @observable seconds: number = 61
  @observable times: number = 0
  @observable timer: NodeJS.Timer | null = null

  @observable text: {
    defaultText: string
    countDownText: [string, string]
    againText: string
  } = {
    defaultText: '发送验证码',
    countDownText: ['重新获取(', ' s)'],
    againText: '重新获取'
  }

  @computed get isCountDownStart() {
    return this.seconds === 61
  }

  @computed get countDownText() {
    if (this.seconds < 61) {
      let [startStr, endStr] = this.text.countDownText
      return startStr + this.seconds + endStr
    }
    if (this.times > 0) return this.text.againText
    return this.text.defaultText
  }
  @action.bound
  initText({
    defaultText,
    countDownText,
    againText
  }: {
    defaultText: string
    countDownText: [string, string]
    againText: string
  }) {
    this.text.defaultText = defaultText
    this.text.countDownText = countDownText
    this.text.againText = againText
  }
  /**发送验证码或者重新获取验证码点击 */
  @action.bound
  sendAuthCodeBtnClick() {
    this.stopCountDown()
    console.log('倒计时开始')
    this.seconds = 60
    this.timer = setInterval(() => {
      if (this.seconds === 60) this.times++
      this.seconds--
      console.log('倒计时递减中', this.seconds)
      if (this.seconds === 0) {
        this.stopCountDown()
      }
    }, 1000)
  }

  /**倒计时结束 */
  @action.bound
  stopCountDown() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    this.seconds = 61
    console.log('倒计时结束，重置状态', this.seconds, this.timer)
  }

  /**重置获取验证码的次数 */
  @action.bound
  resetTimes() {
    this.times = 0
  }
}

/**验证码输入框 */
class LoginAuthCodeInput extends LoginAuthCodeBtn {
  @observable authcode: string | null = null
  @computed get getAuthCode(): string {
    return this.authcode ? this.authcode : ''
  }
  @computed get checkAuthCode(): boolean {
    // if (this.authcode === null) return true
    if (!this.authcode) return false
    if (this.authcode.length < 6 || this.authcode.length > 6) return false
    return true
  }
  @action.bound
  setAuthCode(value: string) {
    this.authcode = value
  }
}

/**手机号输入框 */
class LoginPhoneInput extends LoginAuthCodeInput {
  @observable phone: string = ''

  @computed get getPhone() {
    return this.phone
  }

  @computed get replacePhone() {
    return this.phone ? this.phone.replace(/\s/g, '') : ''
  }

  @computed get checkPhone(): boolean {
    // if (this.phone === null) return true
    if (this.replacePhone.length === 0) return false
    if (this.replacePhone.length < 11 || this.replacePhone.length > 11)
      return false
    return true
  }

  @action.bound
  setPhone(value: string) {
    value = value.replace(/\s/g, '')
    let phone = ''
    for (var i = 0; i < value.length; i++) {
      if (i == 2 || i == 6) {
        phone += value.charAt(i) + ' '
      } else {
        phone += value.charAt(i)
      }
    }
    this.phone = phone
  }
}

/**登录按钮 */
class LoginSubmitBtn extends LoginPhoneInput {
  @action.bound
  login() {
    let userPhone = this.phone
    let verfiyCode = this.authcode
    console.log('登录', {userPhone, verfiyCode})
  }
}

/**登录页信息校验提示消息 */
class LoginMsg extends LoginSubmitBtn {
  @observable loginMsg: string = ''

  @computed get isShowLoginMsg(): boolean {
    return this.loginMsg !== ''
  }

  @action.bound
  hiddenLoginMsg() {
    if (this.loginMsg) this.loginMsg = ''
  }

  @action.bound
  changeMsg(msg: string) {
    this.loginMsg = msg
    console.log('消息提示改变', msg)
  }
}

class Login extends LoginMsg {}

export const AuthCodeBtnStore = createContext(new LoginAuthCodeBtn())
export const AuthCodeInputStore = createContext(new LoginAuthCodeInput())
export const PhoneInputStore = createContext(new LoginPhoneInput())
export const ToolTipMsgStore = createContext(new LoginMsg())
const LoginStore = createContext(new Login())
export default LoginStore
